<template>
  <form-dialop
    :title="(type === 'create' ? $t('resource.createResourcePool') : $t('resource.editResourcePool'))"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <el-form ref="form" :model="formData" :rules="formRule" label-width="150px" v-loading="loading">
        <el-form-item :label="$t('common.name')" prop="name" name="resource-pool-form-name">
          <el-input v-model="formData.name" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('resource.resourcePoolCode')" prop="pool_code" name="pool_code">
          <el-input v-model="formData.pool_code" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('resource.proxy')" prop="api_proxy" name="api_proxy">
          <el-input v-model="formData.api_proxy" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('resource.mobile')" prop="desktop_exceptions_notice_mobile" name="desktop_exceptions_notice_mobile">
          <el-input :autosize="{ minRows: 2}" type=textarea v-model="formData.desktop_exceptions_notice_mobile" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('resource.email')" prop="desktop_exceptions_notice_mail" name="desktop_exceptions_notice_mail">
          <el-input :autosize="{ minRows: 2}" type=textarea v-model="formData.desktop_exceptions_notice_mail" @keyup.enter.native="submit"></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.description')" prop="description" name="resource-pool-form-description">
          <el-input v-model="formData.description" type="textarea" maxlength="200" show-word-limit @keyup.enter.native="submit"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading" name="resource-pool-form-submit-button">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import { isValidURL } from '../../../utils/validate';
import Vue from 'vue'
import FormDialop from '../../../components/Dialog/formDialog.vue';
import { deepClone } from '../../../utils';
export default Vue.extend({
  components: {
    FormDialop
  },
  props: {
    submitMethod: {
      type: Function,
      default() {
        return (formData: any) => Promise.resolve();
      }
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      type: "create",
      defaultName: '',
      formData: {
        name: "",
        pool_code: "",
        api_proxy: "",
        desktop_exceptions_notice_mobile: '',
        desktop_exceptions_notice_mail: '',
        description: ""
      },
      formRule: {
        name: [
          { required: true, message: this.$t('user.nameRequired'), trigger: 'blur' },
          { max: 50, message: this.$t('message.nameLengthRule'), trigger: 'blur' },
          { validator: (rule: any, value: any, callback: any) => {
            if (value === (this as any).defaultName) {
              return callback();
            } else {
              (this as any).$pandaApi.apiCheckResourcePoolName(value).then(() => {
                return callback();
              }).catch((e: any) => {
                return callback(e);
              });
            }
          }, trigger: 'blur' }
        ],
        api_proxy: [
          { validator: (rule: any, value: any, callback: any) => {
            if ( value !== '' && !isValidURL(value)) {
                callback(new Error(this.$t('resource.apiProxyError').toString()))
              } else {
                callback()
              }
          }, trigger: 'blur'},
          { max: 50, message: this.$t('resource.apiProxyMax'), trigger: 'blur' }
        ],
        pool_code: [
          { required: true, message: this.$t('resource.inputResourcePoolID'), trigger: 'blur' },
          { max: 50, message: this.$t('resource.resourcePoolIDLength'), trigger: 'blur' }
        ],
        description: [
          { max: 200, message:  this.$t('policy.message.descriptionLength'), trigger: 'blur' }
        ],
        desktop_exceptions_notice_mobile: [
          { validator: (rule: any, value: any, callback: any) => {
            if(value == "") {
              return callback();
            }
            const exp = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
            const d = value.split(',')
            for(let i in d) {
              if(!exp.test(d[i])) {
                return callback((this as any).$t("resource.checkMobileTips"));
              }
            }
            return callback();
          }, trigger: 'blur' },
        ],
        desktop_exceptions_notice_mail: [
          { validator: (rule: any, value: any, callback: any) => {
            if(value == "") {
              return callback();
            }
            const exp = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            const d = value.split(',')
            for(let i in d) {
              if(!exp.test(d[i])) {
                return callback((this as any).$t("resource.checkEmailTips"))
              }
            }
            return callback();
          }, trigger: 'blur' },
        ],
      }
    }
  },
  created() {
  },
  methods: {
    init(type: string, formData: any) {
      this.type = type;
      if (formData) {
        let data: any = {};
        data.id = formData.id;
        data.name = formData.name;
        data.api_proxy = formData.api_proxy;
        data.pool_code = formData.pool_code;
        data.desktop_exceptions_notice_mobile = formData.desktop_exceptions_notice_mobile.join(',')
        data.desktop_exceptions_notice_mail = formData.desktop_exceptions_notice_mail.join(',')
        data.description = formData.description;
        this.formData = deepClone(data);
        this.defaultName = this.formData.name;
        this.visible = true;
      } else {
        this.formData = {
          name: "",
          api_proxy: "",
          pool_code: "",
          desktop_exceptions_notice_mobile: '',
          desktop_exceptions_notice_mail: '',
          description: ""
        };
        this.visible = true;
      }
      if (this.$refs['form']) {
        (this.$refs['form'] as any).clearValidate();
      }
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
          this.loading = true;
          (this as any).formData.desktop_exceptions_notice_mobile = this.formData.desktop_exceptions_notice_mobile.split(',');
          (this as any).formData.desktop_exceptions_notice_mail = this.formData.desktop_exceptions_notice_mail.split(',');
          this.submitMethod(this.type, this.formData).then(() => {
            // this.handleClose();
          }).finally(() => {
            this.loading = false;
          });
        }
      });
    },
    handleClose() {
      this.formData = {
        name: "",
        pool_code: "",
        api_proxy: "",
        desktop_exceptions_notice_mobile: '',
        desktop_exceptions_notice_mail: '',
        description: ""
      };
      if (this.$refs['form']) {
        (this.$refs['form'] as any).clearValidate();
      }
      this.loading = false;
      this.visible = false;
    }
  }
})
</script>
